<template>
  <div class="mainRevenue clearfix" >
       <div class="logoBg"><img src="~@/assets/images/common/fiveG.png"></div>
       <div class="heading">收入分析：<span class="redTitle">{{currentLvlName}}主营收入{{mainIncrementRate}}%，基本面{{basicGapOdbudgetLj}}万元 </span></div>
       <div class="content">
         <div class="tableBox">
         <el-table
           border
           stripe
           style="width: 100%"
           class="tableTh28"
           ref="table"
           :data="tableData"
           :span-method="arraySpanMethod"
           :cell-class-name="rowClass"
         >
           <el-table-column fixed label="主营收入完成情况" prop="className" class-name="first-title" min-width="90"></el-table-column>
           <el-table-column fixed label="主营收入完成情况" prop="indexName" class-name="second-title" min-width="110"></el-table-column>
           <template>
             <el-table-column label="年累计同比情况">
                <el-table-column  label="本年累计(亿元)" prop="thisYearLjIncome" min-width="80">
                  <template slot-scope="scope">
                   <span v-if="scope.row.thisYearLjIncome>0"  style="color:#333">{{scope.row.thisYearLjIncome}}</span>
                   <span v-else style="color: rgb(255,0,0)">{{scope.row.thisYearLjIncome}}</span>
                  </template>

                </el-table-column>
                <el-table-column  label="上年累计(亿元)" prop="lastYearLjIncome" min-width="80">
                  <template slot-scope="scope">
                   <span v-if="scope.row.lastYearLjIncome>0"  style="color:#333">{{scope.row.lastYearLjIncome}}</span>
                   <span v-else style="color: rgb(255,0,0)">{{scope.row.lastYearLjIncome}}</span>
                  </template>
                </el-table-column>
                <el-table-column  label="增长额(亿元)" prop="tbYearInreaseAmt" min-width="80">
                 <template slot-scope="scope">
                   <span v-if="scope.row.tbYearInreaseAmt>0"  style="color:#333">{{scope.row.tbYearInreaseAmt}}</span>
                   <span v-else style="color: rgb(255,0,0)">{{scope.row.tbYearInreaseAmt}}</span>
                  </template>
                </el-table-column>
               <el-table-column  label="同比增长率" prop="tbYearInrease" min-width="80">
                  <template slot-scope="scope">
                   <span v-if="tbYearInrease>0"  style="color:#5585bf">{{scope.row.tbYearInrease}}</span>
                   <span v-else style="color: rgb(255,0,0)">{{scope.row.tbYearInrease}}</span>
                  </template>
                </el-table-column>
                <el-table-column  label="收入拉动贡献(PP)" prop="ldIncome" min-width="80">
                  <template slot-scope="scope">
                   <span v-if="scope.row.ldIncome>0"  style="color:#5585bf">{{scope.row.ldIncome}}</span>
                   <span v-else style="color: rgb(255,0,0)">{{scope.row.ldIncome}}</span>
                  </template>
                </el-table-column>
                </el-table-column>
             <el-table-column label="年度预算完成情况">
               <el-table-column  label="本年预算(亿元)" prop="thisYearBudget" min-width="80">
                 <template slot-scope="scope">
                  <span v-if="scope.row.thisYearBudget>0"  style="color:#333">{{scope.row.thisYearBudget}}</span>
                  <span v-else style="color: rgb(255,0,0)">{{scope.row.thisYearBudget}}</span>
                 </template>
               </el-table-column>
               <el-table-column  label="年度预算进度" prop="completeYearBudget" min-width="80">
                 <template slot-scope="scope">
                  <span v-if="completeYearBudget > 0"  style="color:#5585bf">{{scope.row.completeYearBudget}}</span>
                  <span v-else style="color: rgb(255,0,0)">{{scope.row.completeYearBudget}}</span>
                 </template>
               </el-table-column>
             </el-table-column>
             <el-table-column label="月累计预算完成情况">
               <el-table-column  label="月累计预算(亿元)" prop="thisYearBudgetLj" min-width="80">
                 <template slot-scope="scope">
                  <span v-if="scope.row.thisYearBudgetLj>0"  style="color:#333">{{scope.row.thisYearBudgetLj}}</span>
                  <span v-else style="color: rgb(255,0,0)">{{scope.row.thisYearBudgetLj}}</span>
                 </template>
               </el-table-column>
               <el-table-column  label="月累计预算盈缺(万元)" prop="gapOfBudgetLj" min-width="80">
                 <template slot-scope="scope">
                  <span v-if="scope.row.gapOfBudgetLj>0"  style="color:#5585bf">{{scope.row.gapOfBudgetLj}}</span>
                  <span v-else style="color: rgb(255,0,0)">{{scope.row.gapOfBudgetLj}}</span>
                 </template>
               </el-table-column>
             </el-table-column>
           </template>
         </el-table>
         </div>
         <div class="bottom">
         <div class="desc">
           <div class="growthRate">
             <div class="weightFont"><span class="lingxing"></span>收入增长率情况</div>
             <span class="normalFont sign">{{acctMonth}}月，主营收入完成{{thisMonthMainIncome}}亿元,{{mainIncrementAmt}}亿元，<span class="normalRedFont">{{mainIncrementRate}}%。</span>
             <span class="normalFont">其中：</span><span class="normalRedFont">基本面收入同比{{basicTbYearInrease}},DICT收入同比{{dictTbYearInrease}}</span></span>
             <!-- <div class="marg"><span class="normalFont">其中：</span><span class="normalRedFont">基本面收入同比 {{basicIncrementRate}}%，DICT收入同比 {{dictIncrementRate}}%</span></div> -->
           </div>
           <div class="budget">
             <div class="weightFont"><span class="lingxing"></span>收入预算完成情况：</div>
             <div class="normalFont sign">{{acctMonth}}月，完成年度预算的{{thisYearMainComplete}}%。月累计超额完成预算<span class="normalRedFont">{{mainGapOfBudget}} 万元</span></div>
             <div class="redTitle">{{noArriveTarget}}万元</div>
           </div>
         </div>

         <div class="echartBox">
            <div class="rightEchart">
                 <div class="contentTitle">{{currentYear}}主营业务收入月走势</div>
                 <businessIncome :incomeMain='incomeMain' :time="currentYear.substr(0, 4)"></businessIncome>
            </div>
            <!-- <div class="rightEchart">
                  <div class="contentTitle">基本面及ICT(含IDC)收入月走势</div>
                  <itcIncome :itcIncomeData='incomeBasicAndICTList'></itcIncome>
             </div> -->
         </div>
         </div>
       </div>
  </div>
</template>

<script>
import businessIncome from "@/views/budget/showPdf/showEchart/businessIncome";
import itcIncome from "@/views/budget/showPdf/showEchart/itcIncome";
import { $budgetAPI } from "@/api";
import {getCookie} from "@/common/js/cookie"
import { mergeTableRow, mergeSpan } from "@/utils/mixin";
    export default {
        name: "mainRevenue",
        props: ["areaId", "month"],
        components:{
          businessIncome,
          itcIncome,
        },
       data(){
         return{
           number:10,
           thisMonthMainIncome:'',
           currentLvlName:'',
           incrementRate:'',
           basicGapOdbudgetLj:'',
           basicIncrementRate:'',
           dictIncrementRate:'',
           mainIncrementRate:'',
           mainIncrementAmt:'',
           thisYearMainComplete:'',
           noArriveTarget:'',
           acctMonth:'',
           tableData:[],
           spanArr:[],
           currentMonth:'',
           incomeBasicAndICTList:[],
           mainGapOfBudget:[],
           incomeMain:{},
           currentYear:'',
           completeYearBudget:'',
           tbYearInrease:'',
           basicTbYearInrease:'',
           dictTbYearInrease:'',
         }
       },
       methods:{

         rowClass ({ row, column, rowIndex, columnIndex }) {
           if (columnIndex === 5 ||columnIndex === 6||columnIndex === 10) {
             return 'rgb196'
           } else if(columnIndex === 2 ){
             return 'bacColor00'
           }else  {
             return 'bacColor317eb0'
           }
         },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
           if (columnIndex == 0 || columnIndex == 1 ) {
               return this.spanArr[rowIndex][columnIndex];
               }
          },
         getMainCampIncome(){
           var that = this
          let token = getCookie('token');
           $budgetAPI.getMainCampIncome(
           {token:token,
           areaId:this.areaId,
           acctMonth:this.month},
           res => {
             if(res && res.code == 0 )
               that.mainIncrementAmt = res.content.mainIncrementAmt;
               that.mainIncrementRate = res.content.mainIncrementRate;
               that.currentLvlName = res.content.currentLvlName;
               that.thisMonthMainIncome = res.content.thisMonthMainIncome;
               that.incrementRate = res.content.incrementRate;
               that.basicIncrementRate = res.content.basicIncrementRate;
               that.dictIncrementRate = res.content.dictIncrementRate;
               that.thisYearMainComplete = res.content.thisYearMainComplete;
               that.basicGapOdbudgetLj = res.content.basicGapOdbudgetLj;
               if(that.basicGapOdbudgetLj>0){
                 that.basicGapOdbudgetLj = '超额' + that.basicGapOdbudgetLj
               }else{
                 that.basicGapOdbudgetLj = '缺口' + that.basicGapOdbudgetLj*-1
               }
               that.incomeComplete=res.content.incomeComplete;
               that.noArriveTarget=res.content.noArriveTarget;
               that.acctMonth =  res.content.acctMonth;
               that.currentMonth = res.content.currentMonth.substring(5,6)+'月'
               that.currentYear = res.content.currentMonth.substring(0,4)+'年'
               that.mainGapOfBudget = res.content.mainGapOfBudget
               if(res.content.mainGapOfBudget>0){
                 that.mainGapOfBudget = '超额'+that.mainGapOfBudget
                 }else{
                    that.mainGapOfBudget = '缺口'+(-that.mainGapOfBudget)
                 }
               that.incomeBasicAndICTList = res.content.incomeBasicAndICTList;
               res.content.incomeAnalysisList.map((item,index)=>{
                 that.tbYearInrease = item.tbYearInrease
                 that.completeYearBudget = item.completeYearBudget
                 item.tbYearInrease = item.tbYearInrease+'%'
                 item.completeYearBudget = item.completeYearBudget+'%'
               })
               that.tableData = res.content.incomeAnalysisList;
               that.basicTbYearInrease = that.tableData[1].tbYearInrease
               that.dictTbYearInrease = that.tableData[2].tbYearInrease
               that.spanArr = mergeSpan(that.tableData, [
                "className",
                "indexName"
              ]);
              that.incomeMain= res.content.incomeMain;

           },
            err => {}
            )
         },

       },
    }
</script>

<style  lang="scss" scoped>
.mainRevenue{
   padding: 20px;
   border:1px solid #dee5f3;
   border-radius:5px;
   margin-top: 20px;
   position:relative;
   .mainRevenue.clearfix:after,.mainRevenue.clearfix:before{
     content: "";
     display: table;
   }
   .mainRevenue.clearfix:after{
     clear: both;
   }
   .mainRevenue.clearfix{
     *zoom: 1;
   }
   .logoBg{
     position: absolute;
     right:20px;
     top:20px;
   }
   .heading{
     font-size: 22px;
     font-weight: 700;
     text-align: center;
     padding-bottom: 40px;
     .redTitle{
       color:#c00000
     }
   }
   .content{
     .tableBox{
       border-top: 1px solid #9abcf1;
       border-left: 1px solid #bfbfbf;
       border-right: 1px solid #bfbfbf;
       border-bottom: 1px solid #bfbfbf;

        /deep/ .tableTh28 .el-table__header{
        .first-title.is-leaf {
             position: relative;
             border-right: 1px solid #d7e5fb !important;
             .cell {
              color: #d7e5fb;
             }
         }
         .second-title.is-leaf {
           overflow: visible;
           .cell {
             transform: translateX(-60%);
           }
         }
       }
       /deep/ .el-table tr td{
         &.rgb196{
           background: rgb(253,233,217);
         }
         &.bacColor317eb0{
           background: rgb(255,255,204);
         }
         &.bacColor00{
           background: rgb(255,255,204);
           span{
             color:#c00000 !important;
           }
         }
       }
      /deep/ .el-table tr:last-child td {
          color: #333;
          text-align: center;
          border-bottom: 1px solid transparent !important;
          border-right: 1px solid #bfbfbf !important;
      }
     }
    .bottom{
      display: flex;
      margin-top:20px;
     .desc{
       flex:1;
       display: flex;
       flex-flow: column;
       .growthRate{
         flex:1;
       }
       .budget{
          flex:1;
       }
       .weightFont{
         font-size: 18px;
         font-weight: 700;
         margin-bottom: 10px;
           .lingxing{
             width: 10px;
             height: 10px;
             background-color: #c00000;
             transform:rotate(45deg);
             -ms-transform:rotate(45deg); /* Internet Explorer */
             -moz-transform:rotate(45deg); /* Firefox */
             -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
              -o-transform:rotate(45deg); /* Opera */
              margin-right:7px;
              display:inline-block;
           }
       }
       .redTitle{
         color: #c00000;
         font-size: 18px;
         font-weight: 700;
         margin-top: 10px;
         padding-left: 20px;
       }
       .normalFont{
          font-size: 16px;
          &.sign{
            padding-left: 20px;
            display: inline-block;
            position: relative;
            &::before{
               content: '\2714';
               color: #c00000;
               position: absolute;
               left:0;
            }
          }

       }
       .normalRedFont{
          font-size: 16px;
          color:#c00000;
       }
       .marg{
         margin-top:20px;
       }
       .budget{
           margin-top: 20px;
       }
     }
     .echartBox{
        flex:2;
        margin-left: 10px;
        .rightEchart{
           position: relative;
           display: block;
           width: 100%;
           border:1px solid #e5e5e5;
           border-radius: 10px;
           padding: 20px;
           float: right;
           height: 300px;
           &:before{
             content:"";
             position:absolute;
             left:21%;
             top:-2px;
             width:56%;
             height:2px;
             background-color:#fff
           }
        .contentTitle{
            position: absolute;
            width:56%;
            left: 50%;
            top: -14px;
            transform: translateX(-50%);
            font-size: 18px;
            font-weight: 700;
            text-align: center;
         }
        }
     }
     }
   }


   }
</style>
